<script lang="ts" setup>
import dayjs from 'dayjs'
import {wxPay, wxAppletPay} from '@/api/order'
import {getDetail} from '@/api/video';
import type {IProduct} from '@/typings/interface';
import {delayNavigateTo} from '@/utils/navigator';

const {base, success} = useToast()

let id = $ref<number>()
let productInfo = $ref<IProduct>()

// 获取课程id和课程信息
onLoad(async (option) => {
    id = option?.id
    let {data: videoInfo} = await getDetail(id!);
    productInfo = videoInfo
})

// 请求微信支付
async function goWechatPay() {
    // #ifdef APP-PLUS
    const data = await wxPay({
        type: 'APP',
        id: id!,
    })
    if (data.code === 0) {
        // 调起微信支付
        uni.requestPayment({
            provider: 'wxpay',
            orderInfo: data.data,
            success: () => {
                success('支付成功')
                delayNavigateTo(`/pages/detail/index?id=${id}`, {isRedirect: true})
            },
            fail: () => {
                base('支付失败')
            }
        })
    } else {
        base(data.msg || '微信接口请求失败')
    }
    // #endif
    // #ifdef MP-WEIXIN
    const wxAppletData = await wxAppletPay({type: 'WEAPP', id: id!})
    if (wxAppletData.code === 0) {
        uni.requestPayment(
                {
                    provider: 'wxpay',
                    ...wxAppletData.data as any,
                    success: () => {
                        success('支付成功')
                        delayNavigateTo(`/pages/detail/index?id=${id}`, {isRedirect: true})
                    },
                    fail: () => {
                        base('支付失败，请重试')
                    }
                }
        )
    } else {
        base(data.msg || '微信接口请求失败')
    }
    // #endif
}

</script>

<template>
    <view h-full>
        <view h-60 bg-gray-8 between px-4 text="22 white">
            <view flex items-center>
                <image w-26 h-26 mr-2 src="@/static/images/icons/order/time.png"/>
                <text>30分钟后自动关闭此订单</text>
            </view>
            <text>代支付</text>
        </view>
        <view my-3 p-4 bg-white text="20 #555555">
            <view flex="~ col" gap-2 p-b-2 border="b #d7d7d7">
                <view between>
                    <text>订单时间：</text>
                    <text> {{ dayjs(new Date()).format('YYYY-MM-DD-HH:mm:ss') }}</text>
                </view>
                <view between>
                    <text>课程总额：</text>
                    <text>¥{{ productInfo?.amount }}</text>
                </view>
                <view between>
                    <text>活动优惠：</text>
                    <text text="#ff4439">
                        - ¥{{ (productInfo?.old_amount! - productInfo?.amount!).toFixed() }}
                    </text>
                </view>
            </view>
            <view between mt-4>
                <view/>
                <view center>
                    <text text="24 #555555">
                        实付款:&nbsp;&nbsp;
                    </text>
                    <text text="28 #ff4439" font-extrabold>
                        ¥{{ productInfo?.amount }}
                    </text>
                </view>
            </view>
        </view>
        <view p-4 bg-white>
            <text text="28 #555555">
                支付方式
            </text>
            <view m="t-3.5 b-4" flex="~ wrap" between>
                <view class="b b-#d7d7d7 w-38%" h-80 rounded p="x-3.8 y-1" between mb>
                    <view center>
                        <image w-50 h-50 mr-2 src="/static/images/icons/order/wechat.svg"/>
                        <text text="30 #555555">
                            微信支付
                        </text>
                    </view>
                </view>
            </view>
        </view>
        <view w-full py-3 bg-white around bottom-0 absolute class="b b-#d7d7d7">
            <view>
                <text text="24 #555555">
                    实付款:&nbsp;
                </text>
                <text text="38 #ff4439" font-bold>
                    ¥{{ productInfo?.amount }}
                </text>
            </view>
            <view around>
                <button ml p-0 m-0 leading-6 rounded-full w-160 text="24 white" class="bg-#ff4439" @click="goWechatPay">
                    立即支付
                </button>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
uni-page-body {
    height: 100%;
    overflow: hidden;
    background-color: #f8f8f8;
}
</style>
